<template>
    <div>
        <!-- <ul class="infinite-list" style="overflow: auto">
            <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
        </ul> -->
        <el-scrollbar>
            <div v-for="item in List" :key="item" class="scrollbar-demo-item">
                <!-- 新订单 -->
                <div v-if="item.status == 1">
                    <div style="display:flex;justify-content: space-between;padding: 0px 10px">
                        <h3>{{ item.orderName }}</h3>
                        <span>{{ item.createdTime }}</span>
                    </div>
                    <p style="margin-top:5px;padding: 0px 10px">您有新的订单，(订单号：{{ item.orderNo }}),请及时查看</p>
                </div>
                <!-- 退款订单 -->
                <div v-else>
                    <div style=" color: rgb(158 153 153);display:flex;justify-content: space-between;padding: 0px 10px">
                        <h3> {{ item.orderName }}</h3>
                        <span>{{ item.createdTime }}</span>

                    </div>
                    <p style="color: var(--el-color-primary-light-1);margin-top:5px;padding: 0px 10px">
                        用户发起一笔退款订单,(买家：{{ item.name }},订单号：{{
                            item.orderNo }}),请尽快审核</p>
                </div>

            </div>
        </el-scrollbar>
    </div>

</template>

<script>
export default {
    name: 'mescenter',
    components: {
    },
    data() {
        return {
            List: [
                {
                    orderName: "新订单",
                    name: '',
                    status: 1,
                    orderNo: '12345678',
                    createdTime: '2024-9-28 14:00:00'
                },
                {
                    orderName: "退款订单",
                    name: '张三',
                    status: 2,
                    orderNo: '12345678',
                    createdTime: '2024-9-28 14:00:00'
                },
            ]

        }
    },
    created() {

    },
    mounted() {
    },
    methods: {


    }
}
</script>

<style scoped>
.scrollbar-demo-item {
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    height: 60px;
    margin: 10px;
    /* text-align: center; */
    padding: 8px;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary-dark-8);
}
</style>